<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>苹果官网ipad-air发布主页图片切换动画</title>
<link rel="stylesheet" href="css/base.css" type="text/css" />
<link rel="stylesheet" href="css/overview-desktop.css" type="text/css" />
<script src="js/sizzle.js" ></script>
<script src="js/ac_base.js" ></script>
<script>
var s_account="applecnglobal,applecnipad,applecnipadtab"
</script>
<script src="js/s_code_h.js"></script>
</head>
<body>
<div id="wrapper" data-hires="true">
  <!--chapter one-->
  <article class="chapter fade in" id="chapter-one">
    <section class="scene" id="build-in">
      <div class="scene-content">
        <!--intro media element-->
        <div class="media" id="intro"> <img id="intro-posterframe" src="images/intro_posterframe.jpg" width="1440" height="900" alt=""  /> </div>
        <h1 class="container centered"> <img class="product-title" src="images/ipad_air_title.png" width="251" height="65" alt="iPad Air"  /> <img src="images/hero_title.png" width="421" height="49" alt="轻出份量"  /> </h1>
      </div>
    </section>
  </article>
  <!--section nav-->
  <nav id="section-nav" data-chapter-nav="chapter-two">
    <ul role="navigation">
      <li class="nav-link active" role="link"> <span class="label">iPad Air</span> <span class="dot"></span> </li>
      <li class="nav-link" role="link"> <span class="label">设计</span> <span class="dot"></span> </li>
      <li class="nav-link" role="link"> <span class="label">动力</span> <span class="dot"></span> </li>
      <li class="nav-link" role="link"> <span class="label">无线</span> <span class="dot"></span> </li>
      <li class="nav-link" role="link"> <span class="label">App</span> <span class="dot"></span> </li>
      <li class="nav-link" role="link"> <span class="label">iOS 7</span> <span class="dot"></span> </li>
      <li class="nav-link" role="link"> <span class="label">Smart Cover</span> <span class="dot"></span> </li>
    </ul>
  </nav>
  <!--chapter two-->
  <article class="chapter fade" id="chapter-two" aria-hidden="true">
    <!--story media element-->
    <div class="media" id="story"></div>
    <script src="js/overview.js"></script>
    <!--scroll button-->
    <div class="scroll-button enabled" id="scroll-button">
      <div class="label">滚动以继续</div>
      <div class="arrow"></div>
    </div>
    <!--hero scene-->
    <section class="scene active" id="hero"  data-track-visitor-engagement="hero">
      <div class="scene-content"> <img class="hero-img centered" src="images/hero.jpg" width="1060" height="109" alt=""  />
        <h1 class="container centered"><img class="product-title" src="images/ipad_air_title.png" width="251" height="65" alt="iPad Air"  /> <img src="images/hero_title.png" width="421" height="49" alt="轻出份量"  /> </h1>
      </div>
    </section>
    <!--design scene-->
    <section class="scene" id="design"  data-track-visitor-engagement="design">
      <div class="scene-content"> <img class="hero-img centered" src="images/design_hero.jpg" width="498" height="640" alt=""  />
        <div class="container centered fade-slide">
          <h1><img src="images/design_title.png" width="325" height="167" alt="设计全然一新十足领先科技，不足一斤之轻。"  /></h1>
          <p class="intro">只有拿起 iPad Air 时你才会相信，它竟然仅有 7.5 毫米之薄，不足一斤之轻。绚丽夺目的 Retina 显示屏置身于更细窄的边框之中，因此充盈眼帘的只有你的内容。此外，光滑平润的机身中还蕴藏着难以置信的重量级动力。现在，你可以在轻盈的享受中，实现更多可能。</p>
          <p class="intro"><a class="more" href="javascript:">进一步了解设计</a></p>
        </div>
        <ul class="tiles centered fade-slide">
          <li><img src="images/design_details_weight.png" width="100" height="100" alt="不足 1 斤"  /></li>
          <li><img src="images/design_details_lighter.png" width="100" height="100" alt="轻了 28%"  /></li>
          <li><img src="images/design_details_thinner.png" width="100" height="100" alt="薄了 20%"  /></li>
        </ul>
      </div>
    </section>
    <!--performance scene-->
    <section class="scene" id="performance"  data-track-visitor-engagement="performance">
      <div class="scene-content"> <img class="hero-img centered" src="images/performance_hero.jpg" width="1070" height="214" alt=""  />
        <div class="container centered fade-slide">
          <h1><img src="images/performance_title.png" width="848" height="110" alt="A7 芯片台式电脑级架构，但不限于台面。"  /></h1>
          <p class="intro">iPad Air 配备的全新 A7 芯片基于 64 位架构而设计。它带来了极为卓越的性能表现：在处理器速度和图形处理速度比前代快达 2 倍的同时，电池使用时间却丝毫不减。因此，现在你可以让一种超乎寻常的强大力量，与你随身而行。<br class="responsive" />
            <br class="responsive" />
            <a class="more" href="javascript:">进一步了解功能</a></p>
        </div>
        <ul class="tiles centered fade-slide">
          <li><img src="images/performance_details_cpu.png" width="100" height="100" alt="高达 2 倍处理器性能"  /></li>
          <li><img src="images/performance_details_gpu.png" width="100" height="100" alt="高达 2 倍图形处理器性能"  /></li>
          <li><img src="images/performance_details_battery.png" width="100" height="100" alt="高达 10 小时电池使用时间"  /></li>
        </ul>
      </div>
    </section>
    <!--wireless scene-->
    <section class="scene" id="wireless"  data-track-visitor-engagement="wireless">
      <div class="scene-content"> <img class="hero-img centered" src="images/wireless_hero.jpg" width="474" height="664" alt=""  />
        <div class="container centered fade-slide">
          <h1><img src="images/wireless_title.png" width="435" height="110" alt="先进的无线网络连接更多地方，更大作为。 "  /></h1>
          <p class="intro">iPad&nbsp;Air 让你的网络连接速度远超以往，适用地点大大扩展。通过用两条天线取代一条天线，以及配备 MIMO 技术，iPad&nbsp;Air 拥有比上代产品快达 2 倍的无线连接速度。不仅如此，WLAN + Cellular 机型还支持世界各地更多网络。所以环顾世界，尽有能让你轻松快速享受网络的地方<sup>2</sup>。</p>
          <ul class="tiles">
            <li><img src="images/wireless_details_antennas.png" width="100" height="100" alt="2 条天线"  /></li>
            <li><img src="images/wireless_details_faster.png" width="100" height="100" alt="快达 2 倍无线连接速度"  /></li>
          </ul>
        </div>
      </div>
    </section>
    <!--apps scene-->
    <section class="scene" id="apps"  data-track-visitor-engagement="apps">
      <div class="scene-content">
        <div class="container centered fade-slide">
          <h1><img src="images/apps_title.png" width="1024" height="110" alt="一系列强大 App为你正在做的一切，也为你想要做的一切。"  /></h1>
          <p class="intro" style="width:1000px;">iPad 的 app 截然与众不同。因为它们只为 iPad 量身设计，所以看起来如此惊艳夺目，显示屏上每一颗像素的绚丽色彩，于此都有淋漓尽致的发挥。iPad Air 内置多款出色 app 来处理你的日常事务，比如查看电子邮件和浏览网络。为了帮助你尽情挥洒创意和提高工作效率，<br />
            iPhoto、iMovie、GarageBand、Pages、Numbers 和 Keynote 精彩更胜以往，现已为每台新购买的 iPad Air 准备就绪。<br />
            不仅如此，在 App Store 中更有超过 475,000 款精彩 iPad app 触手可及<sup>3</sup>。正是有了如此出色的一系列 app，<br />
            iPad Air 几乎无所不能，这意味着你也同样如此。<br class="responsive" />
            <br class="responsive" />
            <a class="more left-link" href="javascript:">进一步了解内置 app</a><a class="more" href="javascript:">进一步了解 App Store</a></p>
        </div>
        <div class="app-fan-wrapper centered">
          <ul class="app-fan">
            <li class="ipad centered left four" data-wait="true"><img src="images/apps_left_four.jpg" width="135" height="397" alt=""></li>
            <li class="ipad centered left three"><img src="images/apps_left_three.jpg" width="122" height="397" alt=""  /></li>
            <li class="ipad centered left two"><img src="images/apps_left_two.jpg" width="137" height="397" alt=""  /></li>
            <li class="ipad centered hero"><img src="images/apps_hero.png" width="280" height="397" alt=""  /></li>
            <li class="ipad centered right two"><img src="images/apps_right_two.jpg" width="137" height="397" alt=""  /></li>
            <li class="ipad centered right three"><img src="images/apps_right_three.jpg" width="122" height="397" alt=""  /></li>
            <li class="ipad centered right four"><img src="images/apps_right_four.jpg" width="135" height="397" alt=""  /></li>
          </ul>
        </div>
      </div>
    </section>
    <!--ios scene-->
    <section class="scene" id="ios"  data-track-visitor-engagement="ios">
      <div class="scene-content"> <img class="hero-img centered" src="images/ios_hero.jpg" width="702" height="379" alt=""  />
        <div class="container centered fade-slide">
          <h1><img src="images/ios_title.png" width="639" height="110" alt="iPad Air 和 iOS 7精美设计，精彩整合。"  /></h1>
          <p class="intro">iOS 7 为极尽 64 位架构优势而设计。因此，从方方面面来看，其先进都足以与搭载它的 iPad Air 相提并论。凭借更智能的多任务处理、控制中心和 AirDrop 等全新功能，iOS 7 令 iPad Air 的使用体验更美好，更简便。你会感觉一切都仿佛天作之合，因为 iOS 7 与 iPad Air 不仅是为相辅相成而设计，更是为相得益彰而设计。</p>
        </div>
      </div>
    </section>
    <!--smart-cover scene-->
    <section class="scene" id="smart-cover"  data-track-visitor-engagement="smartcover">
      <div class="scene-content"> <img class="hero-img centered" src="images/smartcover_hero.jpg" width="788" height="513" alt=""  />
        <div class="container centered fade-slide" data-wait="true">
          <h1><img src="images/smartcover_title.png" width="382" height="166" alt="iPad Air Smart Cover 和 Smart Case让 iPad Air 出色更出彩"  /></h1>
          <p class="intro">重新设计的 Smart&nbsp;Cover 和 Smart&nbsp;Case 堪称 iPad&nbsp;Air 的天生绝配。随着它们的开合，iPad&nbsp;Air 即可被唤醒或进入睡眠状态。经过折叠，它们还能变身为非常适合阅读、观影和文字输入的支架。不仅如此，Smart&nbsp;Cover 和全新 Smart&nbsp;Case 还推出一系列全新色彩任你选择。现在，它们不仅用起来很出色，看上去更出彩<sup>4</sup>。</p>
        </div>
      </div>
    </section>
    <!--footer scene-->
    <section class="scene" id="footer"  data-track-visitor-engagement="footer">
      <div class="scene-content">
        <div class="grid2col mini-promo"> <a href="#" class="block selfclear">
          <div class="column first container">
            <h1><img src="images/mini_promo_title.png" width="156" height="63" alt="iPad mini 配备 Retina 显示屏"  /></h1>
            <p>绚丽夺目的 310 万像素 Retina 显示屏、全新 A7 芯片、先进的无线网络连接，以及一系列激发创意和提升效率的强大 app。iPad mini 为你将重量级的动力与能力，融入一手可握的轻灵小巧之中。</p>
            <span class="more font-16">了解更多</span> </div>
          <div class="column last"> <img src="images/mini_promo_hero.jpg" width="562" height="283" alt=""  /> </div>
          </a> </div>
        <div class="footer-wrapper">
          <!--/globalfooter-->
        </div>
      </div>
    </section>
  </article>
</div>
</body>
</html>